<template>
  <a-input
    v-model="number"
    placeholder="请输入收款账户"
    @change="handleChangeNumber"
    style="width: 100%"
  >
    <a-select
      slot="addonBefore"
      v-model="payType"
      @change="handleChangePayType"
      style="width: 100px"
    >
      <a-select-option value="alipay">
        支付宝
      </a-select-option>
      <a-select-option value="bank">
        银行
      </a-select-option>
    </a-select>
  </a-input>
</template>

<script>
export default {
  name: "ReceiverAccount",
  props: {
    receiverAccount: Object,
    default: () => ({})
  },
  watch: {
    // 监听外层value发生改变是同步应用到组件内部，这里使用了函数参数默认值
    value({ payType = "alipay", number = "" } = {}) {
      this.payType = payType;
      this.number = number;
    }
  },
  data() {
    let { payType = "alipay", number = "" } = this.receiverAccount || {};
    return {
      payType,
      number
    };
  },
  methods: {
    handleChangePayType(type) {
      // 组件内部值发生变化时  使用emit同步将value到组件外部，这里使用es6向外发出一个新对象
      this.$emit(
        "change",
        Object.assign({}, this.receiverAccount, { payType: type })
      );
    },
    handleChangeNumber(e) {
      this.$emit(
        "change",
        Object.assign({}, this.receiverAccount, { number: e.target.value })
      );
    }
  }
};
</script>

<style lang="less"></style>
